<template>
  <div class="mainPage">
    <h2 style="font-size: 24px; font-weight: 700;"> 数据总览</h2>

    <a-flex :vertical="true"  wrap="wrap">

    <a-flex :style="{ ...boxStyle }" justify="space-evenly" align="center" wrap="wrap" gap="middle">
      <a-card hoverable style="width: 200px;" :loading="loading">
        <a-statistic title="总用户数" :value="overviewStats.totalUsers" style="margin-right: 50px" />
      </a-card>

      <a-card hoverable style='width: 200px;' :loading="loading">
        <a-statistic title="发布问卷数" :precision="2" :value="overviewStats.publishedSurveys" />
      </a-card>

      <a-card hoverable style="width: 200px;" :loading="loading">
        <a-statistic title="已参与调查数" :value="overviewStats.participatedSurveys"/>
      </a-card>

      <a-card hoverable style="width: 200px;" :loading="loading">
      <a-statistic title="参与讨论数" :precision="2" :value="overviewStats.discussions" />
     </a-card>

    </a-flex>

    <a-flex :style="{ ...boxStyle }" justify="space-evenly" align="center" wrap="wrap" gap="middle">
      <a-card title="当前正在进行的问卷进度：" :bordered="false" style="width: 300px; min-height: 300px; max-height: 400px; overflow: hidden;" size="small" hoverable :loading="loading">
      <div v-for="survey in surveyProgress" :key="survey.id" style="margin-bottom: 15px;">
        <span>{{ survey.title }}</span>
        <a-progress :percent="survey.progress" />
      </div>
      </a-card>

      <a-card title="当前最新讨论记录：" :bordered="false" style="width: 300px; min-height: 300px; max-height: 400px; overflow: hidden;" hoverable size="small" :loading="loading">
        <newDiscussList :discussions="latestDiscussions"></newDiscussList>

        </a-card>

        <a-card title="新加入用户：" :bordered="false" style="width: 300px; min-height: 300px; max-height: 400px; overflow: hidden;" hoverable size="small" :loading="loading">
          <!-- newAddUser -->
           <newAddUser :users="newUsers"></newAddUser>

          </a-card>
      </a-flex>

    </a-flex>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useLogin} from '../stores/index';
import newDiscussList from './newDiscussList.vue'
import newAddUser from './newAddUser.vue';
import { dashboardApi } from '../services/api.js';
import { getMockData } from '../utils/mockData.js';

const login = useLogin();

// 响应式数据
const loading = ref(true);
const overviewStats = ref({
  totalUsers: 0,
  publishedSurveys: 0,
  participatedSurveys: 0,
  discussions: 0
});

const surveyProgress = ref([]);
const latestDiscussions = ref([]);
const newUsers = ref([]);

const boxStyle = {
  width: '100%',
  minHeight: '120px',
  borderRadius: '6px',
  marginTop: '20px',
  minWeight:'180px'
};

// 获取数据总览统计信息
const fetchOverviewStats = async () => {
  try {
    const response = await dashboardApi.getOverviewStats();
    overviewStats.value = response.data;
  } catch (error) {
    console.warn('获取统计数据失败，使用假数据:', error);
    const mockResponse = await getMockData('overviewStats');
    overviewStats.value = mockResponse.data;
  }
};

// 获取问卷进度信息
const fetchSurveyProgress = async () => {
  try {
    const response = await dashboardApi.getSurveyProgress();
    surveyProgress.value = response.data;
  } catch (error) {
    console.warn('获取问卷进度失败，使用假数据:', error);
    const mockResponse = await getMockData('surveyProgress');
    surveyProgress.value = mockResponse.data;
  }
};

// 获取最新讨论记录
const fetchLatestDiscussions = async () => {
  try {
    const response = await dashboardApi.getLatestDiscussions();
    latestDiscussions.value = response.data;
  } catch (error) {
    console.warn('获取讨论记录失败，使用假数据:', error);
    const mockResponse = await getMockData('latestDiscussions');
    latestDiscussions.value = mockResponse.data;
  }
};

// 获取新加入用户
const fetchNewUsers = async () => {
  try {
    const response = await dashboardApi.getNewUsers();
    newUsers.value = response.data;
  } catch (error) {
    console.warn('获取新用户失败，使用假数据:', error);
    const mockResponse = await getMockData('newUsers');
    newUsers.value = mockResponse.data;
  }
};

// 初始化数据
const initData = async () => {
  loading.value = true;
  try {
    // 并行请求所有数据
    await Promise.all([
      fetchOverviewStats(),
      fetchSurveyProgress(),
      fetchLatestDiscussions(),
      fetchNewUsers()
    ]);
  } catch (error) {
    console.error('初始化数据失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  initData();
  console.log(login.test);
});
</script>

<style scoped>
.mainPage {
  height: 100%;
}

</style>